<template>
  <div
    id="DeviceEchart"
    v-loading="loading"
    element-loading-background="#002d5a"
    element-loading-text="拼命加载中"
  >
    <div
      :id="id"
      :ref="id"
      :class="className"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>
<script>
export default {
  props: {
    // 类名
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    // 宽度
    width: {
      type: String,
      default: "100%",
    },
    // 高
    height: {
      type: String,
      default: "100%",
    },
    // 内容
    options: {
      type: Object,
      default: () => ({}),
    },
    // 图例
    legendData: {
      type: Array,
      default: [],
    },
    // 点击按钮
    activeBtnArr: {
      type: Array,
      default: [],
    },
    // 实时刷新更新Series
    setData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      myChart: "",
      myOptions: {},
      legendActive: [],
      times: null,
      loading: true,
      noActive: [],
    };
  },

  beforeDestroy() {
    clearInterval(this.times);
  },
  watch: {
    options(e) {
      if (e) {
        this.myOptions = e;
        this.legendActive = this.legendData;
        this.setInt();
      }
    },
    // 按钮事件
    activeBtnArr(e) {
      let arr1 = this.legendData;
      let arr2 = e;
      // 先得到没有选中的值
      this.noActive = arr1
        .filter((obj) => !arr2.includes(obj.label))
        .map((obj) => obj.label);
      // 有
      arr2.forEach((data) => {
        this.myChart.dispatchAction({
          type: "legendSelect",
          // 图例名称
          name: data,
        });
      });
      // 没有
      this.noActive.forEach((item) => {
        this.myChart.dispatchAction({
          type: "legendUnSelect",
          // 图例名称
          name: item,
        });
      });
    },
    setData: {
      handler(e) {
        // console.log(e, "setData更新");
        if (e) {
          this.myChart.setOption({
            series: e,
            xAxis: {
              data: e[0].data.map((e) => {
                return e.name;
              }),
            },
          });
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化
      this.myChart = this.$echarts.init(this.$refs[this.id]);
      // 设置图表
      this.myChart.setOption(this.myOptions);
      this.loading = false;

      // 点击事件
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    // 设置数据
    setInt() {
      if (this.myOptions.series.length) {
        this.myChart.setOption(this.myOptions);
        this.loading = false;
      } else {
        this.loading = false;
      }
    },

    tabCilck(item) {
      item.active = !item.active;
      this.myChart.dispatchAction({
        type: item.active ? "legendSelect" : "legendUnSelect",
        // 图例名称
        name: item.label,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#DeviceEchart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    .tab {
      display: flex;
    }
  }
}
</style>